<template>
    <div>
        <div class="task-list_box" v-if="data.type == 4">
            <div class="task-list_head">
                <!-- div class="task-head_left">
                    <img :src="imgUrl + 'getguest/guest_btn.png'" alt />
                    <span>{{ typeDes }}</span>
                </div>
                <div class="task-head_right">{{ currentStatus }}</div>-->
            </div>
            <div class="content-wrap" @click="goDetail">
                <div class="task-desc_box">
                    <div class="task-desc_list">
                        <div class="tit">朋友圈推广：</div>
                        <div class v-if="data.recommend">{{ data.recommend }}</div>
                    </div>
                </div>
                <div class="image-list-wrap" v-if="data.content.imglist">
                    <div class="image-list" v-for="item in data.content.imglist" :key="item.id">
                        <img :src="item" alt />
                    </div>
                </div>
                <div v-if="data.content.link" class="link-wrap ellipsis_line_com">链接：{{data.content.link}}</div>
            </div>

            <div class="task-desc_box">
                <div class="task-desc_list">
                    <span class="tit">截止时间：</span>
                    <span class="dec">{{ data.end_time * 1000 | formatTime }}</span>
                </div>
                <div class="task-desc_list">
                    <span class="tit">发布人：</span>
                    <span class="dec">{{ data.name }}</span>
                </div>
            </div>
            <div class="task-button" v-if="type==='list'">
                <div class="option_btn" v-if="data.recommend" @click="copy(data.recommend)">复制内容</div>
                <div class="option_btn" v-if="!$util.isEmpty(data.content.imglist)" @click.stop="downloadPoster(data.content.imglist)">下载图片</div>
                <div class="option_btn" v-if="data.content.link" @click="copy(data.content.link)">复制链接</div>
            </div>
        </div>
        <!-- --------------------------------- 判断分割线 ------------------------------ -->
        <div class="task-list_box" @click="goDetail" v-else>
            <div class="task-list_head">
                <!--div class="task-head_left">
                    <img :src="imgUrl + 'getguest/guest_btn.png'" alt />
                    <span>{{ typeDes }}</span>
                </div>
                <div class="task-head_right">{{ currentStatus }}</div>-->
            </div>
            <item-link @goTo="goTo" :params="{
        ...data.content,
        imgUrl: data.content.file_url,
        cat_name: !$util.isEmpty(data.content.cate_name)?data.content.cate_name:'',
        huoke_num: data.count_user,
        extension_num: data.share_num
    }" />
            <div class="task-desc_box">
                <div class="task-desc_list">
                    <span class="tit">主&#12288;&#12288;&#12288;题：</span>
                    <span class="dec">{{ data.recommend }}</span>
                </div>
                <div class="task-desc_list">
                    <span class="tit">日&#12288;&#12288;&#12288;期：</span>
                    <span class="dec">{{ data.end_time * 1000 | formatTime }}</span>
                </div>
                <div class="task-desc_list">
                    <span class="tit">发&#12288;布&#12288;人：</span>
                    <span class="dec">{{ data.name }}</span>
                </div>
            </div>
            <!-- div class="task-button" v-if="type==='list'">
                <div @click.stop="share" class="app-button option_btn">转发</div>
            </！div>-->
        </div>
    </div>
</template>

<script>
import itemLink from './itemLink'
import { confirmTask } from '@/api/getGuest'

export default {
	name: 'TaskList',
	components: {
		itemLink
	},
	props: {
		data: {
			type: Object,
			default: () => {}
		},
		type: {
			type: String,
			default: 'list'
		}
	},
	computed: {
		typeDes() {
			// eslint-disable-next-line no-nested-ternary
			let text = ''
			if (this.data.type === 1) {
				text = '获客文章'
			}
			if (this.data.type === 2) {
				text = '获客案例'
			}
			if (this.data.type === 3) {
				text = '获客海报'
			}
			if (this.data.type === 4) {
				text = '朋友圈推广'
			}
			return text
		},
		currentStatus() {
			switch (this.data.status) {
				case 2:
					return '未到期'
					break
				case 3:
					return '已到期'
					break
				case 4:
					return '已完成'
					break
				case 5:
					return '未完成'
					break
				case 6:
					return '逾期'
					break
				default:
					return '所有'
			}
		}
	},
	data() {
		return {
			imgUrl: this.$constant.imgUrl,
			currentQuery: {}
		}
	},
	methods: {
		share() {
			this.$emit('share', this.data)
		},
		goDetail() {
			this.$emit('goDetail', this.data)
		},
		// 去对应的文章详情
		goTo() {
			this.currentQuery = JSON.parse(uni.getStorageSync('currentQuery'))
			if (this.type !== 'list') {
                if (this.data.type === 1) {
					const params = {
						mainId: 'null',
						articleid: this.data.multi_id,
						owner_user_id: this.currentQuery.owner_user_id || uni.getStorageSync('user_id')
					}
					uni.navigateTo({
						url: `/pages/getGuest/articledetail${this.commonJS.queryData(params)}`
                    })
                }
                if (this.data.type === 2) {
					const params = {
                        mainId: 'null',
                        case_id: this.data.multi_id,
                        owner_user_id: this.currentQuery.owner_user_id || uni.getStorageSync('user_id')
					}
					const { share_user_id, p_share_user_id } = this.currentQuery
					if (share_user_id) {
						params.share_user_id = share_user_id
					}
					if (p_share_user_id) {
						params.p_share_user_id = p_share_user_id
					}
					uni.navigateTo({
						url: `/pages/case/casedetail${this.commonJS.queryData(params)}`
					})
                }
                if (this.data.type === 3){const params = {
                    poster_id: this.data.multi_id,
                    owner_user_id: this.currentQuery.owner_user_id || uni.getStorageSync('user_id')
                    }
					uni.navigateTo({
						url: `/pages/getGuest/poster/onlineDetail${this.commonJS.queryData(params)}`
                    })
                }
			}
		},
		copy(text) {
			// 复制
			uni.setClipboardData({
				data: text,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'success'
					})
				},
				fail: () => {
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					})
				}
			})
			confirmTask({ work_id: this.data.work_id })
		},
		// 预览图片
		downloadPoster(item) {
			uni.previewImage({
				urls: item
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.task-button {
    display: flex;
    justify-content: center;
    align-items: center;
    .option_btn {
        line-height: 66px;
        border-radius: 66px;
        border: 1px solid #ddd;
        padding: 0 40px;
        background-color: #fff;
        font-size: 26px;
        & + .option_btn {
            margin-left: 20px;
        }
        &.app-button {
            border-color: #fff;
            background-color: #ffd11a;
        }
    }
    & > button {
        margin-left: 20px;
    }
}

.content-wrap {
    padding: 20px;
    background-color: #f5f5f5;
    border:0.5px solid #dddddd;
    .task-desc_box {
        margin: 0;
        .task-desc_list {
            display: block;
            .tit {
                margin-bottom: 10px;
                width: auto;
                text-align: left;
            }
        }
    }
    .image-list-wrap {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 24px;
        .image-list {
            width: 140px;
            height: 140px;
            margin-right: 20px;
            margin-bottom: 20px;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
    .link-wrap {
        color: #666666;
        margin: 10px 0;
    }
}

.task-list_box {
    background-color: #ffffff;
    height: 400px;
    margin-top: 20px;
    .task-list_head {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        border-bottom: 0.5px solid rgba(238, 238, 238, 1);
        padding: 0 10px 0;
        .task-head_left {
            flex: 1;
            display: flex;
            align-items: center;
            & > img {
                width: 60px;
                height: 60px;
                border-radius: 50%;
            }
            & > span {
                color: #333333;
                padding-left: 21px;
                font-size: 32px;
                font-weight: 600;
            }
        }
        .task-head_right {
            color: #ff6900;
            font-size: 24px;
            font-weight: 400;
        }
    }
}
.task-desc_box {
    margin: 22px;
    .task-desc_list {
        display: flex;
        font-size: 24px;
        font-weight: 400;
        line-height: 36px;
        & .tit {
            text-align: justify;
            margin-bottom: 5px;
            margin-left: 20px;
            color: #999999;
            width: 145px;
        }
        & .dec {
            color: #666666;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}
</style>
